<template>
  <div class="top-comp">
    <!-- 依次调用4个卡片 -->
    <el-row :gutter="20">
      <el-col :span="6"><TotalSale :reportData="reportData" /></el-col>
      <el-col :span="6"><TotalOrder :reportData="reportData" /></el-col>
      <el-col :span="6"><TodayUser :reportData="reportData" /></el-col>
      <el-col :span="6"><TotalUser :reportData="reportData" /></el-col>
    </el-row>
  </div>
</template>

<script>
import TotalSale from "@/components/TopComp/TotalSale.vue";
import TotalOrder from "./TotalOrder.vue";
import TodayUser from "./TodayUser.vue";
import TotalUser from "./TotalUser.vue";
import { getReportData } from "@/api/index.js";
//请求数据 将后端返回的结果保存起来
export default {
  data() {
    return {
      reportData: {},
    };
  },
  components: {
    TotalSale,
    TotalOrder,
    TodayUser,
    TotalUser,
  },
  async mounted() {
    const res = await getReportData();
    this.reportData = res.data;
  },
};
</script>

<style lang="scss">
span {
  font-size: 14px !important;
  color: #464545;
}
.css-1 {
  margin-left: 8px;
  font-weight: 600;
}
span.increase {
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent green transparent;
  margin-left: 10px;
  transform: translateY(-50%);
}
span.decrease {
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 4px;
  border-style: solid;
  border-color: red transparent transparent transparent;
  margin-left: 10px;
}
</style>
